import {FC,useState} from 'react'

// useState能够在函数组件中'勾入'状态

const UseStateCom: FC<any> = ()=>{
    //设置状态的时候 一定要传入一个新的状态
    let [num,setNum] = useState<number>(10)
    // console.log(useState(20));
    let [userInfo,setUserInfo] = useState<{username:string,password:string,age:number}>({username:'',password:'',age:20})

    //自增

    const increaseNum = ()=>{
         setNum(num + 1)
    }

    //自减

    const decreaseNum = ()=>{
        setNum(num - 1)
    }
    
    return(
        <fieldset>
            <legend>stateHook</legend>
            <button onClick={decreaseNum} >-</button>
            &nbsp;&nbsp;
            <b>{num}</b>
            &nbsp;&nbsp;
            <button onClick={increaseNum} >+</button>

            <h1>username:{userInfo.username}</h1>
            <button onClick={()=>{
                // setUserInfo(Object.assign({},userInfo,{username:'theshy'}))
                setUserInfo({...userInfo,username:'theshy'})
            }} >登入</button>
        </fieldset>
    )
}

export default UseStateCom